<template>
  <ProPanel :groups="groups" :data="stageStore.layerData.data">
    <template #dataSourceUrl="{ row }">
      <div class="edit-input">
        <el-input
          v-model="stageStore.layerData.data.dataSourceUrl"
          placeholder="地址"
          style="width: 218px"
        />
        <img src="@/assets/png/icon-edit.png" @click="showToast" />
        <img src="@/assets/png/icon-ref.png" />
      </div>
    </template>
  </ProPanel>
  <Dialog v-model="dialogVisible" v-if="dialogVisible" :item="item" type="edit" />
</template>

<script lang="ts" setup>
import ProPanel from '@/components/pro-panel/index.vue';
import Dialog from '@/views/editor/stage/layout/panel-left/components/plate/components/webgis/dialog.vue';
import { useStageStore } from '@/store/stage';
import basic from './groups/basic';
import effect from './groups/effect';

const item = ref({});
const dialogVisible = ref(false);
const stageStore = useStageStore();
const groups = computed(() => {
  return stageStore.layerData.type === 'WFS' ? [basic] : [basic, effect];
});

const showToast = () => {
  item.value = {
    type: stageStore.layerData.type,
    dataSourceUrl: stageStore.layerData.data.dataSourceUrl,
  };
  dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
.edit-input {
  display: flex;
  align-items: center;
  img {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    cursor: pointer;
  }
}
</style>
